<template>
    <div class="e-form">
        <div class="tabs">
            <el-tabs tab-position="left" v-model="tabsName" @tab-click="onChangeTab">
                <!-- 基本信息 -->
                <el-tab-pane
                    label="基本信息"
                    name="baseInfo"
                    :disabled="clickTabFlag"
                ></el-tab-pane>
                <el-tab-pane
                    label="拟招标内容明细"
                    name="detail"
                    :disabled="clickTabFlag"
                ></el-tab-pane>
                <el-tab-pane
                    label="招标清单"
                    name="tenderList"
                    :disabled="clickTabFlag"
                ></el-tab-pane>
                <el-tab-pane label="公文文件" name="files" :disabled="clickTabFlag"></el-tab-pane>
                <el-tab-pane label="招标条款" name="clause" :disabled="clickTabFlag"></el-tab-pane>
                <el-tab-pane label="附件信息" name="attach" :disabled="clickTabFlag"></el-tab-pane>
                <el-tab-pane
                    label="审核历史"
                    name="auditHistory"
                    :disabled="clickTabFlag"
                ></el-tab-pane>
                <el-tab-pane label="补遗记录" name="recodes" :disabled="clickTabFlag"></el-tab-pane>
                <div>
                    <div id="baseInfoCon" class="con">
                        <div class="tabs-title" id="baseInfo">基本信息</div>
                        <div style="width: 100%" class="form">
                            <el-form ref="form" :model="form" label-width="150px">
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="招标编号：">
                                            <span>{{ formData.billNo }}</span>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="拟招标项目名称：">
                                            <el-input v-model="formData.tenderName"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="招标方式：">
                                            <el-select
                                                v-model="formData.tenderForm"
                                                placeholder="请选择"
                                            >
                                                <el-option
                                                    v-for="item in options.tenderForm"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value"
                                                >
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="招标类型：">
                                            <el-select
                                                v-model="formData.tenderClass"
                                                placeholder="请选择"
                                            >
                                                <el-option
                                                    v-for="(item, index) in options.tenderClass ||
                                                    []"
                                                    :key="index"
                                                    :label="index"
                                                    :value="index"
                                                >
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="目标预算：">
                                            <el-select
                                                v-model="formData.budgetId"
                                                placeholder="请选择"
                                            >
                                                <el-option
                                                    v-for="(item, index) in []"
                                                    :key="index"
                                                    :label="index"
                                                    :value="index"
                                                >
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="招标公告：">
                                            <span>{{ formData.tenderNotice }}</span>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="投标保证金：">
                                            <el-input v-model="formData.tenderBail"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <!-- 返回id、名字 -->
                                        <el-form-item label="币种：">
                                            <el-input
                                                v-model="formData.currencyCategory"
                                            ></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="拟招标金额：">
                                            <span>{{ formData.tenderAmount }}</span>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="税额：">
                                            <span>{{ formData.taxAmount }}</span>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="申请日期：">
                                            <el-date-picker
                                                v-model="formData.applyTime"
                                                type="date"
                                                placeholder="选择日期"
                                                :clearable="false"
                                            >
                                            </el-date-picker>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="状态：">
                                            <SelectAddr
                                                v-model="formData.address1"
                                                lazy
                                                showCountry
                                            ></SelectAddr>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="招标单位：">
                                            <SelectAddr
                                                v-model="formData.address2"
                                                lazy
                                                showCountry
                                            ></SelectAddr>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="申请单位：">
                                            <SelectAddr
                                                v-model="formData.address3"
                                                lazy
                                                showCountry
                                            ></SelectAddr>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-form-item label="招标项目工程概况：">
                                        <el-input
                                            type="textarea"
                                            :rows="2"
                                            placeholder="请输入内容"
                                            v-model="formData.projectOverview"
                                            style="margin-right: 110px"
                                        >
                                        </el-input>
                                    </el-form-item>
                                </el-row>
                                <el-row>
                                    <el-form-item label="招标单位：">
                                        <el-input
                                            type="textarea"
                                            :rows="2"
                                            placeholder="请输入内容"
                                            v-model="formData.remark"
                                            style="margin-right: 110px"
                                        >
                                        </el-input>
                                    </el-form-item>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="录入机构：">
                                            <!-- 传id和名称 -->
                                            <span>{{ formData.orgName }}</span>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="本位币：">
                                            <!-- 传id和名称 -->
                                            <span>{{ formData.currency }}</span>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="本位币汇率：">
                                            <span>{{ formData.baseCurrencyRate }}</span>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="人民币汇率：">
                                            <span>{{ formData.rmbRate }}</span>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="复选框：">
                                            <el-checkbox label="复选框 A"></el-checkbox>
                                            <el-checkbox label="复选框 B"></el-checkbox>
                                            <el-checkbox label="复选框 C"></el-checkbox>
                                            <el-checkbox label="禁用" disabled></el-checkbox>
                                            <el-checkbox
                                                :value="true"
                                                label="选中且禁用"
                                                disabled
                                            ></el-checkbox>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                        </div>
                    </div>

                    <!-- 拟招标内容明细 -->
                    <div id="detailCon" class="con">
                        <div class="tabs-title" id="detail">拟招标内容明细</div>
                        <div class="e-table">
                            <div class="top">
                                <div class="left">
                                    <div>
                                        <el-button
                                            size="small"
                                            style="background: #7aa818; color: #fff"
                                            >新增</el-button
                                        >
                                    </div>
                                </div>
                            </div>
                            <el-table
                                :data="tableData"
                                border
                                style="width: 100%"
                                @cell-mouse-enter="cellMouseEnter"
                                @cell-mouse-leave="cellMouseLeave"
                                :cell-class-name="cellClsNm"
                            >
                                <el-table-column prop="a1" label="包件编号" width="200">
                                </el-table-column>
                                <el-table-column prop="a" label="包件名称" width="200">
                                </el-table-column>
                                <el-table-column prop="b" label="起止桩号" width="200">
                                </el-table-column>
                                <el-table-column prop="c" label="招标最高限价(元)" width="200">
                                </el-table-column>
                                <el-table-column prop="d" label="分包商名称" width="200">
                                </el-table-column>
                                <el-table-column prop="e" label="税率" width="200">
                                </el-table-column>
                                <el-table-column prop="f" label="税额" width="200">
                                </el-table-column>
                                <el-table-column label="操作" width="200">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.g == '0'" style="color: #e85442"
                                            >未审核</span
                                        >
                                        <span v-if="scope.row.g == '1'" style="color: #4773db"
                                            >审核中</span
                                        >
                                        <span v-if="scope.row.g == '2'" style="color: #979797"
                                            >已审核</span
                                        >
                                    </template>
                                </el-table-column>
                            </el-table>
                            <ComPagination />
                        </div>
                    </div>

                    <!-- 招标清单 -->
                    <div id="tenderListCon" class="con">
                        <div class="tabs-title" id="tenderList">招标清单</div>
                        <div style="display: flex">
                            <div class="left">
                                <ComTreeFile />
                            </div>
                            <div class="right" style="margin-left: 20px; width: 100%">
                                <ComTreeTable />
                            </div>
                        </div>

                        <div class="tabs-title" id="files">公文文件</div>
                        <div class="e-table">
                            <div class="top">
                                <div class="left">
                                    <el-button size="mini">下载</el-button>
                                    <el-button size="mini">删除</el-button>
                                    <el-button
                                        size="mini"
                                        style="color: #fff; background: #35a235; padding: 7px 30px"
                                        >选择公文</el-button
                                    >
                                </div>
                            </div>
                            <el-table
                                :data="tableData"
                                border
                                style="width: 100%"
                                @cell-mouse-enter="cellMouseEnter"
                                @cell-mouse-leave="cellMouseLeave"
                                :cell-class-name="cellClsNm"
                            >
                                <el-table-column type="selection" width="55"> </el-table-column>
                                <el-table-column prop="a1" label="序号" width="200">
                                </el-table-column>
                                <el-table-column prop="a" label="公文文件名称" width="200">
                                </el-table-column>
                                <el-table-column prop="b" label="上传时间" width="200">
                                </el-table-column>
                                <el-table-column prop="c" label="上传人" width="200">
                                </el-table-column>
                            </el-table>
                            <ComPagination />
                        </div>
                    </div>

                    <div id="clauseCon" class="con">
                        <div class="tabs-title" id="clause">通用合同条款</div>
                        <div class="e-table" style="min-height: auto">
                            <el-table
                                :data="tableData"
                                border
                                style="width: 100%"
                                @cell-mouse-enter="cellMouseEnter"
                                @cell-mouse-leave="cellMouseLeave"
                                :cell-class-name="cellClsNm"
                            >
                                <el-table-column prop="a1" label="序号" width="200">
                                </el-table-column>
                                <el-table-column prop="a" label="所属单位" width="200">
                                </el-table-column>
                                <el-table-column prop="b" label="通用合同条款编号" width="200">
                                </el-table-column>
                                <el-table-column prop="c" label="合同条款名称" width="200">
                                </el-table-column>
                                <el-table-column prop="d" label="条款明细查阅" width="200">
                                </el-table-column>
                            </el-table>
                            <ComPagination />
                        </div>

                        <div class="tabs-title" style="margin-top: 20px">项目专用合同条款</div>
                        <div class="e-table" style="min-height: auto; margin-bottom: 20px">
                            <div class="top">
                                <div class="left">
                                    <div>
                                        <el-button
                                            size="small"
                                            style="background: #7aa818; color: #fff"
                                            >新增</el-button
                                        >
                                        <el-button
                                            size="small"
                                            style="background: #7aa818; color: #fff"
                                            >删除</el-button
                                        >
                                    </div>
                                </div>
                            </div>
                            <el-table
                                :data="tableData"
                                border
                                style="width: 100%"
                                @cell-mouse-enter="cellMouseEnter"
                                @cell-mouse-leave="cellMouseLeave"
                                :cell-class-name="cellClsNm"
                            >
                                <div class="top">
                                    <div class="left">
                                        <el-button size="mini">新增</el-button>
                                        <el-button size="mini">删除</el-button>
                                    </div>
                                </div>
                                <el-table-column prop="a1" label="序号" width="200">
                                </el-table-column>
                                <el-table-column prop="a" label="条目号" width="200">
                                </el-table-column>
                                <el-table-column prop="b" label="原条款内容" width="200">
                                </el-table-column>
                                <el-table-column prop="c" label="专用合同条款内容" width="200">
                                </el-table-column>
                            </el-table>
                            <ComPagination />
                        </div>
                    </div>

                    <div id="attachCon" class="con">
                        <div class="tabs-title" id="attach">附件信息</div>
                        <attach-comp :relationId="attachId" bucketName="testModule" />
                        <!-- 参数为模块名称 -->
                    </div>

                    <div id="auditHistoryCon" class="con">
                        <div class="tabs-title" id="auditHistory">审核历史</div>
                        <div class="e-table">
                            <el-table
                                :data="tableData"
                                border
                                style="width: 100%"
                                @cell-mouse-enter="cellMouseEnter"
                                @cell-mouse-leave="cellMouseLeave"
                                :cell-class-name="cellClsNm"
                            >
                                <el-table-column prop="a1" label="审核级次" width="200">
                                </el-table-column>
                                <el-table-column prop="a" label="审核人" width="200">
                                </el-table-column>
                                <el-table-column prop="b" label="审核人岗位" width="200">
                                </el-table-column>
                                <el-table-column prop="c" label="通知时间" width="200">
                                </el-table-column>
                                <el-table-column prop="c" label="审核时间" width="200">
                                </el-table-column>
                                <el-table-column prop="c" label="审核意见" width="200">
                                </el-table-column>
                            </el-table>
                        </div>
                        <ComPagination />
                    </div>

                    <div id="recodesCon" class="con" style="margin-bottom: 0">
                        <div class="tabs-title" id="recodes">补遗记录</div>
                        <el-table
                            :data="tableData"
                            border
                            style="width: 100%"
                            @cell-mouse-enter="cellMouseEnter"
                            @cell-mouse-leave="cellMouseLeave"
                            :cell-class-name="cellClsNm"
                        >
                            <el-table-column prop="a1" label="补遗日期" width="200">
                            </el-table-column>
                            <el-table-column prop="a" label="补遗版本" width="200">
                            </el-table-column>
                            <el-table-column prop="b" label="补遗单号" width="200">
                            </el-table-column>
                            <el-table-column prop="c" label="录入人" width="200"> </el-table-column>
                            <el-table-column prop="c" label="单据状态" width="200">
                            </el-table-column>
                        </el-table>
                        <ComPagination />
                    </div>
                </div>
            </el-tabs>
        </div>
        <div id="seat" :style="{ height: seatHeight + 'px' }"></div>
        <div class="buttons">
            <span class="tip"><span style="color: red; margin-right: 0">*</span>为必填项</span>
            <el-button type="primary" size="small" style="background: #2e61d7">打印</el-button>
            <el-popconfirm title="请问确认删除吗？" @confirm="delData">
                <el-button type="primary" size="small" style="background: #2e61d7" slot="reference"
                    >删除</el-button
                >
            </el-popconfirm>
            <el-button type="primary" size="small" style="background: #2e61d7">发布</el-button>
            <el-button type="primary" size="small" style="background: #2e61d7">审核</el-button>
            <el-button type="primary" size="small" style="background: #2e61d7">撤回</el-button>
            <el-button type="primary" size="small" style="background: #2e61d7">提交</el-button>
            <el-button type="primary" size="small" style="background: #2e61d7" @click="submit"
                >保存</el-button
            >
            <el-button size="small" @click="handleClose">取消</el-button>
        </div>
    </div>
</template>

<script>
import ComTreeTable from '@/templates/table/treeTable.vue'
import ComTreeFile from '@/templates/table/treeFile.vue'
import ComPagination from '@/components/pagination/pagination.vue'
import SelectAddr from '@/components/common/addrComp'
import applyRequest from '@/api/tender/apply.js'
import AttachComp from '@/components/common/attachIndex'
import { throttle } from '@/utils/common'
import { mapState } from 'vuex'
import '@/utils/jquery.scrollTo.min'

export default {
    data () {
        return {
            tabsName: 'baseInfo',
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            tableData: [],
            value: '',
            textarea: '',
            formData: {
                address1: '',
                // address1: '{"code":["100000"],"address":["中华人民共和国"],"detail":""}',
                address2:
                    '{"code":["100000","110000"],"address":["中华人民共和国","北京市"],"detail":"1111"}',
                address3:
                    '{"code":["100000","360000","360400","360424"],"address":["中华人民共和国","江西省","九江市","修水县"],"detail":"sddsfdsfd"}'
            },
            screenWidth: 0,
            screenHeight: 0,
            lastConHeight: 0,
            clickTabFlag: false,
            // 如果手动点击时，则不做滚动事件逻辑，只有滚动屏幕时才走滚动事件逻辑
            winEvent: {}
        }
    },
    computed: {
        ...mapState({
            options: state => state.biddingApplication.dictionaries
        }),
        judgeRoute () {
            if (this.$route.path.includes('Add')) {
                return false
            }
            return true
        },
        // 填补底部空白，以使高度够滚动
        seatHeight () {
            return this.screenHeight - 75 - this.lastConHeight
        },
        attachId () {
            return this.$route.query.billid
        }
    },
    components: {
        ComTreeTable,
        ComTreeFile,
        ComPagination,
        SelectAddr,
        AttachComp
    },
    created () {
        this.getData()
    },
    mounted () {
        // 获取最后一个内容区域的高度，计算底部空白
        this.getLastConHeight()

        // 保存所有tabName
        const arr = [
            'baseInfo',
            'detail',
            'tenderList',
            'files',
            'clause',
            'attach',
            'auditHistory',
            'recodes'
        ]
        let $idsTop = []
        const onScroll = () => {
            // 如果手动点击时，则不做滚动事件逻辑，只有滚动屏幕时才走滚动事件逻辑
            if (this.clickTabFlag) {
                return
            }
            if (!$idsTop[$idsTop.length - 1]) {
                $idsTop = arr.map(item => {
                    const $item = document.getElementById(item)
                    let itemTop = null
                    if ($item) {
                        itemTop = $item.offsetTop
                    }
                    return itemTop
                })
            }
            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
            // 倒序查找
            let curLocal = 0
            for (let len = $idsTop.length, i = len - 1; i >= 0; i--) {
                let item = $idsTop[i]
                if (scrollTop + 1 >= item) {
                    curLocal = i
                    break
                }
            }
            // 设置对应tabName
            this.tabsName = arr[curLocal]
        }
        this.winEvent.onScroll = onScroll
        window.addEventListener('scroll', this.winEvent.onScroll)
        this.screenWidth = document.documentElement.clientWidth
        this.screenHeight = document.documentElement.clientHeight
        const onResize = () => {
            this.screenWidth = document.documentElement.clientWidth
            this.screenHeight = document.documentElement.clientHeight
            $idsTop = arr.map(item => {
                const itemTop = document.getElementById(item).offsetTop
                return itemTop
            })
        }
        this.winEvent.onResize = throttle(onResize, 500)
        window.addEventListener('resize', this.winEvent.onResize)
    },
    beforeDestroy () {
        window.removeEventListener('scroll', this.winEvent.onScroll)
        window.removeEventListener('resize', this.winEvent.onResize)
    },
    methods: {
        // 获取最后一个内容区域的高度，计算底部空白
        getLastConHeight () {
            let si = setInterval(() => {
                // 因为dom异步加载，通过轮询找到渲染后的dom，获取高度
                const lastCon = document.getElementById('recodesCon')
                if (lastCon) {
                    const lastConHeight = lastCon.offsetHeight
                    this.lastConHeight = lastConHeight
                    clearInterval(si)
                    si = null
                }
            }, 100)
        },
        // 获取地址对应中文
        getAddrLabel (val) {
            console.log('getAddrLabel: ', val)
            this.formData.addressName = val
        },
        delData () {
            const id = this.$route.query.id
            applyRequest.tenderApplyDeleteBatch([id]).then(res => {
                this.$message({
                    showClose: true,
                    type: 'success',
                    message: res.message
                })
                this.$router.push('./biddingApplication')
            })
        },
        getData () {
            const id = this.$route.query.id
            applyRequest.tenderApplyFindById(id).then(res => {
                this.formData = {
                    ...this.formData,
                    ...res
                }
                // res
            })
        },
        submit () {
            console.log(this.formData.address1, this.formData.address2, this.formData.address3)
            console.log('formData: ', this.formData)
            // applyRequest.tenderApplyUpdate(this.formData).then(res => {
            //     this.dialogVisible = false
            //     this.$message({
            //         showClose: true,
            //         type: 'success',
            //         message: res.message
            //     })
            //     this.$router.push('./biddingApplication')
            //     // this.$emit('refreshTable')
            // })
        },
        handleFullScreen () {
            this.fullscreen = !this.fullscreen
        },
        handleClose () {
            // this.dialogVisible = false
            this.$router.push('./biddingApplication')
        },
        cellClsNm ({ column }) {
            if (column.label === '') {
                return 'fixed-left'
            }
        },
        cellMouseEnter (row) {
            this.MouseEnterId = row.id
        },
        cellMouseLeave () {
            this.MouseEnterId = 0
        },
        onChangeTab (e) {
            $.scrollTo(`#${e.name}`, 500)
            // 如果手动点击时，则不做滚动事件逻辑，只有滚动屏幕时才走滚动事件逻辑
            this.clickTabFlag = true
            // 动画结束后，恢复状态
            setTimeout(() => {
                this.clickTabFlag = false
            }, 600)
        }
    }
}
</script>
